<template>
  <div class="page-container fullpage">
    <el-card>
      <div class="profile-header">
        <h3>个人信息</h3>
        
      </div>

      <div class="profile-body" style="margin-top:12px">
        <el-descriptions title="用户信息" column="1" border>
          <el-descriptions-item label="用户名">{{ info.userName || info.username || info.name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="英文名">{{ info.enName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ info.mobile || '-' }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ info.email || '-' }}</el-descriptions-item>
          <el-descriptions-item label="生日">{{ info.birthday || info.birthdate || '-' }}</el-descriptions-item>
        </el-descriptions>

        <div style="margin-top:16px; text-align:right">
          <el-button @click="goBack">返回主界面</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import api from '../utils/api'

const router = useRouter()
const info = ref<any>({})

const load = async () => {
  const username = localStorage.getItem('username') || ''
  if (!username) return
  try {

    const resp: any = await api.get('/user/search', { params: { username } })
    if (resp && resp.operationResult === 'SUCC') {

      info.value = resp.data || resp || {}
  
      if (Array.isArray(info.value) && info.value.length) info.value = info.value[0]
    } else {
   
      const usersResp: any = await api.get('/users')
      const list = Array.isArray(usersResp?.data) ? usersResp.data : (Array.isArray(usersResp) ? usersResp : [])
      info.value = list.find((u: any) => u.userName === username || u.username === username) || {}
    }
  } catch (err) {
    console.error('load profile err', err)
  }
}

onMounted(() => { load() })

const goBack = () => { try { router.push('/dashboard') } catch (e) {} }
</script>

<style scoped>
.profile-header h3 { margin: 0 }
.muted { color: var(--muted-2, #8b95a3); margin-top:6px }
.page-container { padding: 16px }
</style>
